<template>
    <div class="header">
        <el-image
            :src="kundiLogo"
            fit="fill"
            style="height:100%; width:250px;"
        ></el-image>
        <div style="display: inline-block; vertical-align: top;width: 944px; height: 100px;">
            <!-- 关于坤迪 -->
            <el-button
                v-if="mouseEnteredAbout"
                type="primary"
                style="float: right"
                @mouseenter.native="enterAbout()"
                @mouseleave.native="leaveAbout()"
                @click="toAbout"
            >关于坤迪</el-button>
            <el-button
                v-else
                style="float: right"
                @mouseenter.native="enterAbout()"
                @mouseleave.native="leaveAbout()"
                @click="toAbout"
            >关于坤迪</el-button>
            <!-- 行业资讯 -->
            <el-button
                v-if="mouseEnteredInfo"
                type="primary"
                style="float: right"
                @mouseenter.native="enterInfo()"
                @mouseleave.native="leaveInfo()"
                @click="toIndustryInformation"
            >行业资讯</el-button>
            <el-button
                v-else
                style="float: right"
                @mouseenter.native="enterInfo()"
                @mouseleave.native="leaveInfo()"
                @click="toIndustryInformation"
            >行业资讯</el-button>
            <!-- 合作案例 -->
            <el-button
                v-if="mouseEnteredCoop"
                type="primary"
                style="float: right"
                @click="toCooperation"
                @mouseenter.native="enterCoop()"
                @mouseleave.native="leaveCoop()"
            >合作案例</el-button>
            <el-button
                v-else
                style="float: right"
                @mouseenter.native="enterCoop()"
                @mouseleave.native="leaveCoop()"
            >合作案例</el-button>
            <!-- 技术支持 -->
            <el-button
                v-if="mouseEnteredTech"
                type="primary"
                style="float: right"
                @mouseenter.native="enterTech()"
                @mouseleave.native="leaveTech()"
                @click="toSupport"
            >技术支持 </el-button>
            <el-button
                v-else
                style="float: right"
                @mouseenter.native="enterTech()"
                @mouseleave.native="leaveTech()"
                @click="toSupport"
            >技术支持 </el-button>
            <!-- 软件产品 -->
            <el-dropdown
                class="el-dropdown-link"
                style="float: right"
                @command="handleCommand"
            >
                <el-button
                    v-if="mouseEnteredSoft"
                    type="primary"
                    @mouseenter.native="enterSoft()"
                    @mouseleave.native="leaveSoft()"
                    @click="toSoftware"
                >软件产品</el-button>
                <el-button
                    v-else
                    @mouseenter.native="enterSoft()"
                    @mouseleave.native="leaveSoft()"
                    @click="toSoftware"
                >软件产品</el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        v-for="item in firstMenu"
                        :key="item.name"
                        :command="item"
                    >
                        {{item.titleZh}} {{item.titleEn}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <!-- 首页按钮 -->
            <el-button
                v-if="mouseEnteredFirst"
                type="primary"
                style="float: right"
                @click="toFirst"
                @mouseenter.native="enterFirst()"
                @mouseleave.native="leaveFirst()"
            >首页</el-button>
            <el-button
                v-else
                style="float: right"
                @click="toFirst"
                @mouseenter.native="enterFirst()"
                @mouseleave.native="leaveFirst()"
            >首页</el-button>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            kundiLogo: require("@/assets/images/logo-blue.jpg"),
            firstMenu: [
                { name: "QuantyView", name_zh: "地质信息系统平台" },
                { name: "QuantyMine", name_zh: "矿山地质信息系统" },
                { name: "QuantyPetrol", name_zh: "油气地质信息系统" },
                { name: "QuantyEngine", name_zh: "工程地质信息系统" },
                { name: "QuantyUrban", name_zh: "城市地质信息系统" },
                { name: "QuantyHazard", name_zh: "灾害地质信息系统" },
                { name: "QuantySurvey", name_zh: "区域地质信息系统" },
                { name: "QuantyPipe", name_zh: "城市管线信息系统" },
                { name: "QuantyHydrology", name_zh: "水文泥沙信息系统" }
            ],
            mouseEnteredFirst: false,
            mouseEnteredSoft: false,
            mouseEnteredTech: false,
            mouseEnteredCoop: false,
            mouseEnteredInfo: false,
            mouseEnteredAbout: false
        };
    },
    methods: {
        handleCommand(command) {
            this.$router
                .push({ path: command.titleEn, query: { id: command.id } })
                .catch(err => err);
        },
        enterFirst() {
            this.mouseEnteredFirst = true;
        },
        leaveFirst() {
            this.mouseEnteredFirst = false;
        },
        enterSoft() {
            this.mouseEnteredSoft = true;
        },
        leaveSoft() {
            this.mouseEnteredSoft = false;
        },
        enterTech() {
            this.mouseEnteredTech = true;
        },
        leaveTech() {
            this.mouseEnteredTech = false;
        },
        enterCoop() {
            this.mouseEnteredCoop = true;
        },
        leaveCoop() {
            this.mouseEnteredCoop = false;
        },
        enterInfo() {
            this.mouseEnteredInfo = true;
        },
        leaveInfo() {
            this.mouseEnteredInfo = false;
        },
        enterAbout() {
            this.mouseEnteredAbout = true;
        },
        leaveAbout() {
            this.mouseEnteredAbout = false;
        },
        // 跳转到首页
        toFirst() {
            this.$router.push("/first").catch(err => err);
        },
        // 跳转到员工周计划页面
        toWeekPlan() {
            this.$router.push("/weekPlan").catch(err => err);
        },
        // 跳转到软件产品页面
        toSoftware() {
            this.$router.push("/productList").catch(err => err);
        },
        // 跳转到技术支持页面
        toSupport() {
            this.$router.push("/technicalSupport").catch(err => err);
        },
        // 跳转到合作案例页面
        toCooperation() {
            this.$router.push("/cooperation").catch(err => err);
        },
        // 跳转到行业资讯页面
        toIndustryInformation() {
            this.$router.push("/industryInformation").catch(err => err);
        },
        // 跳转到关于坤迪页面
        toAbout() {
            this.$router.push("/aboutQuanty").catch(err => err);
        }
    },
    mounted() {
        this.$http("/product/getAll").then(response => {
            this.firstMenu = response.data;
        });
    }
};
</script>

<style>
.header {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
.el-header .el-link {
    color: #017ad5;
    line-height: 40px;
}

.el-header .el-button {
    margin-top: 50px;
}
.el-header .el-dropdown .el-button {
    margin-top: 50px;
}
.el-header .el-button--primary:hover {
    border: none;
    background-color: #017ad5;
}
.el-header .el-button--default {
    border: none;
    color: #017ad5;
}
</style>